<script setup>
import { ref } from 'vue'

const props = defineProps({
  subDeviceList: Array,
})
// if (props.subDeviceList) {
//   deviceStore.setDevice(props.subDeviceList)
// }
// const emit = defineEmits(['onBinding'])

const setInverted = (item) => {
  uni.navigateTo({
    url: '/pagesMember/bindDevice/bindDevice',
  })
  // emit('onBinding', val)
}
</script>

<template>
  <view class="deviceItem">
    <view v-for="item in subDeviceList" :key="item.is" class="item">
      <image class="image" :src="item.img" mode="scaleToFill" />
      <view class="info">
        <text class="title">{{ item.name }}</text>
        <p class="text">型号: {{ item.model }}</p>
      </view>
      <view class="state">
        <view class="tag" @click="setInverted(item)">绑定</view>
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.deviceItem {
  .item {
    display: flex;
    margin-top: 10rpx;
    border-radius: 10rpx;
    background-color: #fff;
    .image {
      width: 150rpx;
      height: 150rpx;
    }
  }
  .info {
    width: 250rpx;
    margin-left: 10rpx;
    .title {
      font-size: 24rpx;
      color: #4a4a4a;
    }
    .text {
      color: #888888;
      font-size: 12px;
    }
  }
  .state {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10rpx;
    .tag {
      font-size: 22rpx;
      color: #fff;
      padding: 8rpx 20rpx;
      border-radius: 50rpx;
      background-color: #08afa3;
    }
  }
}
</style>
